<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link href="./image/atreez_icon.png" rel="icon" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1027896_2cvs1mww99o.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/dialog2.css">
    <link rel="stylesheet" href="./css/checkout.css">
    <title>My Reviews</title>
    <script src="./js/common.js"></script>
    <script src="./js/jquery/jquery.min.js"></script>
    <script src="./js/layer/layer.js"></script>
</head>
<style>

</style>
<body onload="init()">
<div class="container-fluid review">
    <div class="row header">
        <ul class="list-inline nav-tabs mlr-16">
            <li class=""><a href="javascript:history.back(-1);" data-toggle="tab-back"><i class="iconfont icon-left-line"></i></a></li>
            <li><a href="my_page.html" data-toggle="tab-back">My Page</a></li>
        </ul>
    </div>
    <div class="row content mlr-16">
        <div class="header-title mb-10">My Reviews</div>
        <div class="review-list mt-24">
            <div class="review-item mt-30">
                <div class="name-date">
                    <div class="name pull-left mr-8">Kuta Li</div>
                    <div class="date pull-left">2019-04-01</div>
                    <div class="action pull-right"><i class="iconfont icon-sangedian"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="rate">
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate"></i>
                </div>
                <div class="review-text mt-15">
                    Aloe is grown mainly in the dry regions of Africa, Asia, Europe and America. Because of its many therapeutic uses
                </div>
                <a href="detail.html">
                <div class="review-product mt-15">
                    <div class="pro-img pull-left mr-10"><img src="./image/15.png" class="img-responsive"></div>
                    <div class="pro-info pull-left">
                        <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection UV Mist Cushion Cover UV Mist Cushion Cover</div>
                    </div>
                    <div class="pro-link pull-right mr-10"><i class="iconfont icon-icon_link"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="review-border mt-30"></div>
                </a>
            </div>
            <div class="review-item mt-30">
                <div class="name-date">
                    <div class="name pull-left mr-8">Kuta Li</div>
                    <div class="date pull-left">2019-03-01</div>
                    <div class="action pull-right"><i class="iconfont icon-sangedian"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="rate">
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate"></i>
                    <i class="iconfont icon-web-rate"></i>
                </div>
                <div class="review-text mt-15">
                    Aloe is grown mainly in the dry regions of Africa
                </div>
                <a href="detail.html">
                    <div class="review-product mt-15">
                        <div class="pro-img pull-left mr-10"><img src="./image/13.png" class="img-responsive"></div>
                        <div class="pro-info pull-left">
                            <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection UV Mist Cushion Cover UV Mist Cushion Cover</div>
                        </div>
                        <div class="pro-link pull-left"><i class="iconfont icon-icon_link"></i></div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="review-border mt-30"></div>
                </a>
            </div>
            <div class="review-item mt-30">
                <div class="name-date">
                    <div class="name pull-left mr-8">Kuta Li</div>
                    <div class="date pull-left">2019-02-01</div>
                    <div class="action pull-right"><i class="iconfont icon-sangedian"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="rate">
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate"></i>
                    <i class="iconfont icon-web-rate"></i>
                </div>
                <div class="review-text mt-15">
                    Six Pack Abs The Big Picture
                </div>
                <a href="detail.html">
                    <div class="review-product mt-15">
                        <div class="pro-img pull-left mr-10"><img src="./image/14.png" class="img-responsive"></div>
                        <div class="pro-info pull-left">
                            <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection UV Mist Cushion Cover UV Mist Cushion Cover</div>
                        </div>
                        <div class="pro-link pull-left"><i class="iconfont icon-icon_link"></i></div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="review-border mt-30"></div>
                </a>
            </div>
            <div class="review-item mt-30">
                <div class="name-date">
                    <div class="name pull-left mr-8">Kuta Li</div>
                    <div class="date pull-left">2019-03-01</div>
                    <div class="action pull-right"><i class="iconfont icon-sangedian"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="rate">
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate active"></i>
                    <i class="iconfont icon-web-rate"></i>
                    <i class="iconfont icon-web-rate"></i>
                </div>
                <div class="review-text mt-15">
                    Aloe is grown mainly in the dry regions of Africa
                </div>
                <a href="detail.html">
                    <div class="review-product mt-15">
                        <div class="pro-img pull-left mr-10"><img src="./image/16.png" class="img-responsive"></div>
                        <div class="pro-info pull-left">
                            <div class="pro-name">Two Tone Tint Lip Bar Autumn Mute Collection UV Mist Cushion Cover UV Mist Cushion Cover</div>
                        </div>
                        <div class="pro-link pull-right"><i class="iconfont icon-icon_link"></i></div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="review-border mt-30"></div>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="dialog-container review-dialog" data-spm="dialog">
    <div class="dialog-wrapper"></div>
    <div class="dialog dialog-popup">
        <div class="dialog-content">
            <div class="dialog-action-list">
                <div class="cell edit">Edit</div>
                <div class="cell del">Delete</div>
                <div class="border"></div>
                <div class="cell cancel">Cancel</div>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    $(function () {
        $('body').on('click','.review-item .action',function () {
            $('.dialog-container').addClass('dialog-show')
            $(document).find('body').addClass('overflowHide')
        })

        $('.dialog-container .cancel').click(function () {
            $('.dialog-container').removeClass('dialog-show')
            $(document).find('body').removeClass('overflowHide')
        })

        $('.dialog-container .edit').click(function () {
            location.href = 'edit_review.html';
        })

        $('.dialog-container .del').click(function () {
            var address_id = $(this).attr('data-id');
            layer.msg('Are you sure you want to<br> delete this review ?', {
                shadeClose: true,
                skin: 'layer-confirm', //只对该层采用myskin皮肤
                shade: 0.3,
                time: 0 //不自动关闭
                ,btn: [ 'No','Yes']
                ,yes: function(index){
                    layer.close(index);
                }
            });

        })


        var len = 60;
        var content = 'Two Tone Tint Lip Bar Autumn Mute Collection UV Mist Cushion Cover UV Mist Cushion Cover';
        var html = content.substring(0,len);
        var html2 = content.length>len?"...":"";



        var html = '<div class="review-item mt-30">\
                <div class="name-date">\
                <div class="name pull-left mr-8">Kuta Li</div>\
        <div class="date pull-left">2019-03-01</div>\
                <div class="action pull-right"><i class="iconfont icon-sangedian"></i></div>\
                <div class="clearfix"></div>\
                </div>\
                <div class="rate">\
                <i class="iconfont icon-web-rate active"></i>\
                <i class="iconfont icon-web-rate active"></i>\
                <i class="iconfont icon-web-rate active"></i>\
                <i class="iconfont icon-web-rate"></i>\
                <i class="iconfont icon-web-rate"></i>\
                </div>\
                <div class="review-text mt-15">\
                Aloe is grown mainly in the dry regions of Africa\
        </div>\
        <a href="detail.html">\
                <div class="review-product mt-15">\
                <div class="pro-img pull-left mr-10"><img src="./image/16.png" class="img-responsive"></div>\
                <div class="pro-info pull-left">\
                <div class="pro-name">'+html+html2+'</div>\
        </div>\
        <div class="pro-link pull-left"><i class="iconfont icon-icon_link"></i></div>\
                <div class="clearfix"></div>\
                </div>\
                <div class="review-border mt-30"></div>\
                </a>\
                </div>';

        //滚动条到页面底部加载更多案例
        $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
            var scrollHeight = $(document).height();   //当前页面的总高度
            var clientHeight = $(this).height();    //当前可视的页面高度
            if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
                $('.content .review-list').append(html);
            }
        });

    })

    function init(){
        var len = 60;
        $('.pro-info .pro-name').each(function(){
            var content = $(this).html();
            var html = content.substring(0,len);
            var html2 = content.length>len?"...":"";
            this.innerHTML = html+html2;
        });

    }
</script>
</html>